/* enum */
import { BaseSelectUserComponentNameEnum, SelectUserComponentServiceProvider } from '@src/component/common/BaseSelectUser/model'
/* hooks */
import { useBaseSelectUserOptions, useSelectUserChecked, useSelectUserCheckedItemList, useSelectUserIsShowCheckbox } from '@src/component/common/BaseSelectUser/hooks'
import { useBaseSelectUserStoreIsFilterVisible } from '@src/component/common/BaseSelectUser/store'
/* scss */
import '@src/component/common/BaseSelectUser/components/ServiceProvider/item.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, computed, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'
/* util */
import { isFalse } from '@src/util/type'
import { isDisabledSelectItem } from '@src/component/common/BaseSelectUser/util'
import { t } from '@src/locales'

export type ServiceProviderItemProps = {
  isMulti: boolean;
  value: SelectUserComponentServiceProvider;
}

export interface ServiceProviderItemSetupState {
  
}

export enum ServiceProviderItemEmitEventNameEnum {
  Input = 'input',
  Click = 'click'
}

export type ServiceProviderItemInstance = ComponentInstance & ServiceProviderItemSetupState
export type ServiceProviderItemVM = ComponentRenderProxy<ServiceProviderItemProps> & CommonComponentInstance & ServiceProviderItemInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserServiceProviderItem,
  emits: [
    ServiceProviderItemEmitEventNameEnum.Input,
    ServiceProviderItemEmitEventNameEnum.Click
  ],
  props: {
    /* 是否为多选状态 */
    isMulti: {
      type: Boolean as PropType<boolean>,
      default: false
    },
    /* 服务商 */
    value: {
      type: Object as PropType<SelectUserComponentServiceProvider>,
      default: () => ({}),
      require: true
    }
  },
  setup(props: ServiceProviderItemProps, { emit }) {
    
    const { addCheckedItem, removeCheckedItem } = useSelectUserCheckedItemList()
    const { isChecked, isDisabled, selectLimitMessage } = useSelectUserChecked(props)
    const { isShowServiceProviderCheckbox } = useSelectUserIsShowCheckbox()
    const { isShowUser, isHideUser } = useBaseSelectUserOptions()
    
    const { isFilterVisible } = useBaseSelectUserStoreIsFilterVisible()
    
    // 当前服务商下 人员数量
    const userCount = computed(() => {
      return props.value.userCount
    })
    
    /** 
     * @description 是否显示用户数量
     * 1. 当前服务商下人员数量大于0
     */
    const isShowUserCount = computed(() => {
      return Number(userCount.value) > 0
    })
    
    /** 
     * @description 是否显示 下级 按钮
     * 1. 显示人员
    */
    const isShowLowerButton = computed(() => {
      return isShowUser.value
    })
    
    const onLowerButtonClickHandler = (event: Event) => {
      event.stopPropagation()
      emit(ServiceProviderItemEmitEventNameEnum.Click, props.value)
    }
    
    // 单选状态下点击事件，展开下级服务商人员
    const onSingleChoseClickHandler = () => {
      
      if (isShowLowerButton.value) {
        emit(ServiceProviderItemEmitEventNameEnum.Click, props.value)
      }
      
    }
    
    const onMultiChoseClickHandler = () => {
      
      if (isFalse(isShowServiceProviderCheckbox.value)) {
        onSingleChoseClickHandler()
        return
      }
      
      if (isDisabled.value) {
        selectLimitMessage()
        return
      }
      
      if (isChecked.value) {
        removeCheckedItem(props.value)
      } else {
        addCheckedItem(props.value)
      }
      
    }
    
    const onClickHandler = () => {
      
      if (isFilterVisible.value) {
        return
      }
      
      if (props.isMulti) {
        onMultiChoseClickHandler()
        return
      }
      
      onSingleChoseClickHandler()
    }
    
    return {
      userCount,
      isChecked,
      isDisabled,
      isShowLowerButton,
      isShowUserCount,
      isShowServiceProviderCheckbox,
      onClickHandler,
      onLowerButtonClickHandler
    }
    
  },
  render(h: CreateElement) {
    
    const classNames = [
      BaseSelectUserComponentNameEnum.BaseSelectUserServiceProviderItem,
      isDisabledSelectItem(this.value) && this.isShowServiceProviderCheckbox ? 'base-select-user-item-no-checkbox' : '',
    ]
    
    return (
      <div class="base-select-user-service-provider-item-wrapper">
        
      <div 
        class={classNames}
        onClick={this.onClickHandler}
      >
        
        {/* start 服务商多选 */}
        {this.isShowServiceProviderCheckbox && (
          <div class="base-select-user-service-provider-item__checkbox">
            <el-checkbox
              value={this.isChecked}
              onInput={this.onClickHandler}
            >
            </el-checkbox>
          </div>
        )}
        {/* end 服务商多选 */}
        
        {/* start 服务商头像 */}
        <div class="base-select-user-service-provider-item__head">
          <div class="base-select-user-service-provider-item__head-img">
            <img src={this.value.logo} />
          </div>
        </div>
        {/* end 服务商头像 */}
        
        {/* start 服务商名称 */}
        <div class="base-select-user-service-provider-item__name">
          { this.value.name }
        </div>
        {/* end 服务商名称 */}
        
        {/* start 服务商人员数量 */}
        {(
          <div class="base-select-user-service-provider-item__count">
            ({ this.userCount })
          </div>
        )}
        {/* end 服务商名称 */}
        
        {/* start 服务商下级按钮 */}
        {this.isShowLowerButton && (
          <div class="base-select-user-service-provider-item__lower" onClick={this.onLowerButtonClickHandler}>
            
            {/* <span class="base-select-user-service-provider-item__lower-line"></span> */}
            
            <i class="iconfont icon-Partition"></i>
            
            <span class="base-select-user-service-provider-item__lower-text">
              {t('common.base.subordinate')}
            </span>
            
          </div>
        )}
        {/* end 服务商下级按钮 */}
        
      </div>
      
    </div>
    )
  }
})
